<template>
  <div class="warn-box">
    <div :class="['justify-between', 'warn-box__tips', warnColor]">
      <span>{{ warnObj.warningTypeName }}</span>
      <i class="el-icon-circle-close"></i>
    </div>
    <div class="warn-box__date justify-start align-center">
      <el-image
        style="width: 100%; height: 500px; margin: 8px 16px 8px 8px"
        :src="warnObj.path"
        fit="scale-down"
        :lazy="true"
      ></el-image>
      <div style="text-align: left">
        <p>{{ `${warnObj.countName}: ${warnObj.times}` }}</p>
        <p>时间： {{ warnObj.warningTime }}</p>
      </div>
    </div>

<!--    <div class="warn-box__footer justify-between">
      <div class="warn-box__footer__btn colorFFF938">
        <span>立即处理</span>
      </div>
      <div class="warn-box__footer__btn color5CFBFF">
        <span>转为待办</span>
      </div>

      <div class="warn-box__footer__btn color5CFBFF">
        <span>消除预警</span>
      </div>
    </div>-->
  </div>
</template>

<script>
export default {
  props: {
    warnObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    idx:{
      type:Number,
      default: () => {
        return 0;
      },
    }
  },

  computed: {
    warnColor() {
      let str = "red";
      switch (this.warnObj.color) {
        case 0:
          str = "green";
          return str;
        case 1:
          str = "yellow";
          return str;
        case 2:
          str = "red";
          return str;
        default:
          return str;
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.warn-box {
  width: 100%;
  height: 600px;
  background-image: url("../assets/biankuang-1@2x.png");
  background-size: 100% 100%;

  &__tips {
    width: 100%;
    height: 30px;
    padding: 4px 12px;
    box-sizing: border-box;
    color: #fff;
  }

  &__date {
    color: #fff;
  }

  &__footer {
    width: 100%;
    // margin: 0 8px;

    &__btn {
      width: 120px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }

    .colorFFF938 {
      color: #fff938;
      background: linear-gradient(
        to right,
        rgba(255, 199, 40, 0),
        rgba(255, 199, 40, 0.4),
        rgba(255, 199, 40, 0)
      );
    }

    .color5CFBFF {
      color: #5cfbff;
      background: linear-gradient(
        to right,
        rgba(92, 251, 255, 0),
        rgba(92, 251, 255, 0.3),
        rgba(92, 251, 255, 0)
      );
    }
  }

  .red {
    background: linear-gradient(
      to right,
      rgba(229, 64, 61, 1),
      rgba(229, 64, 61, 0)
    );
  }

  .orange {
    background: linear-gradient(
      to right,
      rgba(230, 135, 58, 1),
      rgba(230, 135, 58, 0)
    );
  }

  .yellow {
    background: linear-gradient(
      to right,
      rgba(229, 186, 74, 1),
      rgba(229, 186, 74, 0)
    );
  }

  .green {
    background: linear-gradient(
      to right,
      rgba(58, 215, 110, 1),
      rgba(58, 215, 110, 0)
    );
  }
}
</style>
